<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="用户ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="昵称">
        <template slot-scope="scope">
          {{ scope.row.nickName }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <router-link :to="`/userApply/applydetail/${scope.row.openid}`">
            <el-button
              type="primary"
              class="el-icon-tickets"
              title="详细信息"
              size="mini"
              round
            ></el-button>
          </router-link>
          <el-button
            @click="isDelete(scope.row.openid)"
            type="danger"
            class="del_btn el-icon-delete"
            title="删除用户"
            size="mini"
            round
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column label="电话" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="statusFilter(scope.row.status)">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否允许发送申请" width="140" align="center">
        <template slot-scope="scope">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            :value="scope.row.status === '已认证' ? true : false"
            @change="onswitchchange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="create_at"
        label="最后一次修改时间"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.create_at | showTime }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index";
export default {
  filters: {
    showTime(t) {
      return parseTime(new Date(t));
    }
  },
  data() {
    return {
      list: null,
      listLoading: true
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    onswitchchange(row) {
      if (row.status == "已认证") {
        this.$http
          .post("updateUser", { openid: row.openid, status: "待认证" })
          .then(res => {
            this.$message({
              message: res.data.meta.msg,
              type: "success"
            });
          });
        row.status = "待认证";
      } else {
        this.$http
          .post("updateUser", { openid: row.openid, status: "已认证" })
          .then(res => {
            this.$message({
              message: res.data.meta.msg,
              type: "success"
            });
          });
        row.status = "已认证";
      }
    },
    fetchData() {
      this.$http("getUserList").then(res => {
        this.list = res.data.data;
        this.listLoading = false;
      });
    },

    statusFilter: function(s) {
      const statusMap = {
        待认证: "info",
        待审核: "danger",
        未通过: "warning",
        已认证: "success"
      };
      return statusMap[s];
    },
    isDelete(openid) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 发删除请求
          this.$http
            .post("deleteUser", { openid: openid })
            .then(() => {
              this.fetchData();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            })
            .catch(error => {
              console.log(error);
              this.$message({
                type: "danger",
                message: "删除失败，见控制台"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  computed: {
    showTime(t) {
      return parseTime(t);
    }
  }
};
</script>

<style scoped>
.del_btn {
  margin-left: 24px;
}
</style>
